<template>
  <div class="search-container-item">
    <span v-if="name" class="item-name">{{ name }}：</span>
    <el-select
      :multiple="multipleFlag"
      collapse-tags
      @change="
        (e) => {
          $emit('change', e);
        }
      "
      :style="{ width: multipleFlag ? '150px' : '110px' }"
      size="mini"
      :value="multipleFlag ? multipleValue : value"
      placeholder="请选择"
    >
      <el-option
        v-for="item in xqList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "SelectItem",
  props: {
    name: String,
    xqList: Array,
    value: String,
    multipleValue: Array,
    multipleFlag: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.search-container-item {
  margin-right: 20px;
}
.item-name {
  color: #004ca7;
}
</style>
